<template>
  <div class="mce">
    <header>
      <van-search v-model="value" shape="round" background="#4f9dfe" placeholder="请输入搜索药品、疾病、功能主治" class='search' />
      <van-icon class="iconfont icon-saomiao spe" />
    </header>
    <main>
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item><img src="./img/a1.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="./img/a2.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="./img/a3.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="./img/a4.jpg" alt=""></van-swipe-item>
      </van-swipe>
      <ul class="gongge">
          <li>
             <dl @click="$router.push('/home/details/妇科')">
                <dt><img src="./imgs/a.jpg" alt=""></dt>
                <dd>妇产科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/男科')">
                <dt><img src="./imgs/b.jpg" alt=""></dt>
                <dd>男科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/儿科')">
                <dt><img src="./imgs/c.jpg" alt=""></dt>
                <dd>儿科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/消化科')">
                <dt><img src="./imgs/d.jpg" alt=""></dt>
                <dd>消化科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/皮肤科')">
                <dt><img src="./imgs/编组 4@2x.png" alt=""></dt>
                <dd>皮肤科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/呼吸科')">
                <dt><img src="./imgs/编组 5.png" alt=""></dt>
                <dd>呼吸科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/感染科')">
                <dt><img src="./imgs/编组 6.png" alt=""></dt>
                <dd>感染科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/耳鼻喉科')">
                <dt><img src="./imgs//编组 7.png" alt=""></dt>
                <dd>耳鼻喉科</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/保健食品')">
                <dt><img src="./imgs/编组 8.png" alt=""></dt>
                <dd>保健食品</dd>
             </dl>
          </li>
           <li>
             <dl @click="$router.push('/home/details/医疗器城')">
                <dt><img src="./imgs/编组 9.png" alt=""></dt>
                <dd>医疗器城</dd>
             </dl>
          </li>
      </ul>
      <div class="yh">
          <div class="yhtitle"><h3>限时优惠</h3><span>更多></span></div>
          <ul>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group2/M00/AF/F8/CgAgFVy__JGADtKdAAHilc4TG68838.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group1/M00/10/88/CgAgEVaA0WSAT2ASAAAgAIGZPCY96.jpeg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group1/M00/21/7D/CgAgEFbjg16AXhduAAHZ4mKkfIc845.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group1/M00/0B/BB/CgAgEVYEKlOAbfSHAAAgAGqNeSQ58.jpeg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group1/M00/0C/3D/CgAgEVYc_0WAcn28AAAgAJ5osis89.jpeg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
             
          </ul>
      </div>
       <div class="yh">
          <div class="yhtitle"><h3>限时优惠</h3><span>更多></span></div>
          <ul>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group2/M00/B3/49/CgAgFFzs4HaANYX5AAJX1a4V440046.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group2/M00/AF/F8/CgAgFVy__JGADtKdAAHilc4TG68838.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group2/M00/3B/6A/CgAgFFqVKeWAM6Q1AAGhYtq-jaQ743.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group2/M00/B1/C5/CgAgFVzTb_KAd6OXAAFz9BVtWUM778.jpg_180x180.jpg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
              <li>
                    <dl>
                        <dt><img src='https://image.360kad.com/group1/M00/1D/5B/CgAgEVag9oKACYhZAAAgAKbEhKg59.jpeg' alt=""></dt>
                        <dd>
                            <p>Nature复合维生素</p>
                            <p>片11片/罐</p>
                        </dd>
                    </dl>                
              </li>
             
          </ul>
      </div>
    </main>
    <footer></footer>
  </div>
</template>
<script>

import axios from '../../../../utils/request/http'














export default {
 
  data() {
    return {
      value: "",
      value2: "",
     
      data: [
        {
          img: "./imgs/编组 6.png",
          title: "妇产科"
        },
        {
          icon: "./imgs/编组 7.png",
          title: "男科"
        },
        {
          icon: "./imgs/编组 8.png",
          title: "儿科"
        },
        {
          icon: "./imgs/编组 9.png",
          title: "消化科"
        },
        {
          icon: "./imgs/编组 4@2x.png",
          title: "皮肤科"
        },
        {
          icon: "./imgs/编组 5.png",
          title: "呼吸科"
        },
        {
          icon: "./imgs/编组 6.png",
          title: "感染科"
        },
        {
          icon: "./imgs/编组 7.png",
          title: "耳鼻喉科"
        },
        {
          icon: "./imgs/编组 8.png",
          title: "保健食品"
        },
        {
          icon: "./imgs/编组 9.png",
          title: "医疗器城"
        }
      ]
    };
  }
};
</script>
<style>
    [v-cloak] {  /*通过属性选择器，把带有v-cloak的标签隐藏*/
        display: none; 
    }
   
.mce{
  width:3.75rem;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.mce main{
  flex: 1;
  overflow: scroll;
}
.mce header{
  display: flex;
  padding-right:0.05rem;
  align-items: center;
  background: #4f9dfe;
  position: sticky;
}
.mce header .search{
  flex: 1;
}

.mce .my-swipe
{
  color: #fff;
  font-size:0.02rem;
  text-align: center;
  width:3.5rem;
  height:1.5rem;
  margin: 0.1rem auto;

}

.mce .my-swipe .van-swipe-item img{
  width:100%;
  height:100%;
}
.gongge{
  width:3.5rem;
  height:1.8rem;
  border: 0.01rem solid #ccc;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0.01rem;
}
.gongge li{
  width: 20%;
}
.gongge li dl dt img{
  width: 0.5rem;
  height: 0.5rem;
   display: block;
  margin: 0 auto;

}
.gongge li dl dd{
  text-align: center;
}

.yh{
   width:3.5rem;
  margin: 0.1rem auto;
}
.yh ul{
  display:flex;
  overflow: scroll;
}


.van-hairline{
  height: auto;
}
.yh ul li{
  margin-right:0.05rem;
}
.yhtitle{
  display: flex;
  justify-content: space-between;
  height: 0.5rem;
  align-items: center;  
}
.yh dl dt{
  border-radius: 0.2rem;
  overflow: hidden;
}
.yh img{
  width: 1rem;
  height: auto;
}
</style>